<template>
	<view class="play_list">
		<template v-if="playList.creator">
			<!-- 这里是TarBar组件 -->
			<top-bar iconColor="white" title="精选歌单"/>
			<image class="bg" :src="playList.backgroundCoverUrl ? playList.backgroundCoverUrl : playList.coverImgUrl"></image>
			<view class="top_author_info">
				<view class="author_info_content">
					<view class="left_img">
						<image :src="playList.coverImgUrl"></image>
					</view>
					<view class="right_info">
						<view>
							<view class="item-1">
								{{ playList.name }}
							</view>
							<view class="item-2">
								<image :src="playList.creator.avatarUrl" mode=""></image>
								<text>{{ playList.creator.nickname }}</text>
							</view>
						</view>
						<view class="item-3" v-if="playList.desription">{{ playList.desription }}</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="bottom_music_list">
				<view class="bom_item" @click="toMusicPlayer(track.id, index)" v-for="(track, index) in playList.tracks" :key="track.id">
					<view class="left_index">{{ index + 1 }}</view>
					<view class="right_song_info">
						<view class="song_name">{{ track.name }}</view>
						<view class="singer">{{ track.ar[0].name }} - {{ track.name }}</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<BottomBar ref="btmBarRef"/>
	</view>
</template>

<script>
	import { getMusicDetail } from '../../api/index.js'
	import TopBar from '../../components/TopBar.vue'
	import BottomBar from '../index/childComps/BottomBar.vue'
	export default {
		data() {
			return {
				// 歌单详情列表
				playList: []
			}
		},
		components: { TopBar, BottomBar },
		onLoad(options) {
			// 获取歌单详情数据
			this.getMusicDetailFun(options.playListId)
		},
		methods: {
			async getMusicDetailFun(id) {
				const { data: {playlist: res} } = await getMusicDetail(id)
				this.playList = res
			},
			// 跳转到musicplayer页面
			toMusicPlayer(smallId, cur_index) {
				// smallId: 当前用户点击的音乐的id,cur_index: 当前用户点击的音乐在列表中的索引值
				// 更新store中的播放列表
				this.$store.dispatch('changeMusicPlaylist', this.playList.tracks)
				uni.navigateTo({
					url: `/pages/musicplayer/musicplayer?id=${smallId}&cur_index=${cur_index}&flag=1`
				 });
			}
		},
		onShow() {
			// 等待DOM加载完毕后在执行，子组件 BottomBar的初始化数据函数
			this.$nextTick(function(){
				this.$refs.btmBarRef.initData()
			})
		}
	}
</script>

<style lang="scss">
	.play_list {
		width: 100%;
		.bg {
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			left: 0;
			top: 0;
			bottom: 60vh;
			width: 100%;
			height: 45vh;
			// 高斯模糊
			filter: blur(40rpx);
			opacity: 0.9;
			z-index: -3;
		}
		.top_author_info {
			width: 100%;
			height: 25vh;
			padding: 60rpx 30rpx 0rpx;
			.author_info_content {
				display: flex;
				width: 100%;
				// height: 200rpx;
				.left_img {
					width: 200rpx;
					height: 200rpx;
					min-width: 200rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
						box-shadow: 0 -10rpx 0 rgba(187, 182, 182, 0.2);
					}
				}
				.right_info {
					display: flex;
					color: white;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 30rpx;
					font-size: 30rpx;
					.item-2 {
						margin-top: 20rpx;
						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 15rpx;
							vertical-align: middle;
						}
					}
				}
			}
		}
		.bottom_music_list {
			background-color: white;
			/* #ifndef H5 */
			height: calc(69vh - 140rpx);
			/* #endif */
			/* #ifdef H5 */
			height: calc(69vh - 100rpx);
			/* #endif */
			// 解决高度塌陷
			overflow: hidden;
			.bom_item {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				margin-top: 20rpx;
				color: #c8cccc;
				.left_index {
					margin-right: 15rpx;
				}
				.right_song_info {
					width: 600rpx;
					.song_name, .singer {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						word-break: break-all;
					}
					.song_name {
						font-weight: 510;
						font-size: 30rpx;
						color: black;
					}
					.singer {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
